<script setup name="List">
import { Message } from '@arco-design/web-vue';
import { gsap } from 'gsap';
const list = ref([
  "我来了",
  "666",
  "溜了溜了,66666"
])

const val = ref('')

const handleBeforeEnter = (el, done) => {
  gsap.set(el, {
    opacity: 0,
  })
}

const handleEnter = (el, done) => {
  gsap.to(el, {
    opacity: 1,
    duration: .5,
    delay: el.dataset.index * 0.5,
  })
}

const handleLeave = (el, done) => {
  console.log(el);
  gsap.to(el, {
    duration: 2,
    delay: el.dataset.index * 0.5,
    onComplete: done
  })
}

const submit = () => {
  console.log(val.value);
  if(val.value === ''){
    Message.warning('请输入~')
    return;
  }
  list.value.push(val.value);
  val.value = '';
}

</script>

<template>
  <page-wrapper>
    <div class="inline-flex flex-col">
    <div class="inline-flex mb-4">
      <a-input placeholder="输入关键词" v-model="val" class="w-60" /><a-button class="ml-4" @click="submit">提交</a-button>
    </div>
    <transition-group tag="div" appear class="inline-flex flex-col" @before-enter="handleBeforeEnter" @enter="handleEnter" @leave="handleLeave">
      <div v-for="(item, i) in list" :key="item" :data-index="i" :class="['text-white','px-3','rounded','shadow-lg','shadow-gray-400','h-8','leading-8', 'bg-green-500', i > 0 ? 'mt-4':'']" >
      {{item}}
      </div>
    </transition-group>
    </div>
  </page-wrapper>
  
    
</template>

<style lang="less" scoped>
</style>